# Context Menu

<Subtitle>A menu that appears at the pointer on right click or long press.</Subtitle>
<Meta
  name="description"
  content="A high-quality, unstyled React context menu component that appears at the pointer on right click or long press."
/>

import { DemoContextMenuHero } from './demos/hero';

<DemoContextMenuHero />

## Anatomy

Import the components and place them together:

```jsx title="Anatomy"
import { ContextMenu } from '@base-ui-components/react/context-menu';

<ContextMenu.Root>
  <ContextMenu.Trigger />
  <ContextMenu.Portal>
    <ContextMenu.Backdrop />
    <ContextMenu.Positioner>
      <ContextMenu.Popup>
        <ContextMenu.Arrow />
        <ContextMenu.Item />
        <ContextMenu.Separator />
        <ContextMenu.Group>
          <ContextMenu.GroupLabel />
        </ContextMenu.Group>
        <ContextMenu.RadioGroup>
          <ContextMenu.RadioItem />
        </ContextMenu.RadioGroup>
        <ContextMenu.CheckboxItem />
        <ContextMenu.SubmenuRoot>
          <ContextMenu.SubmenuTrigger />
        </ContextMenu.SubmenuRoot>
      </ContextMenu.Popup>
    </ContextMenu.Positioner>
  </ContextMenu.Portal>
</ContextMenu.Root>;
```

## Examples

[Menu](/react/components/menu#examples) displays additional demos, many of which apply to the context menu as well.

### Nested menu

To create a submenu, create a `<ContextMenu.SubmenuRoot>` inside the parent context menu. Use the `<ContextMenu.SubmenuTrigger>` part for the menu item that opens the nested menu.

import { DemoContextMenuSubmenu } from './demos/submenu';

<DemoContextMenuSubmenu />

## API reference

<Reference component="ContextMenu" parts="Root, Trigger" />
<Reference
  component="Menu"
  parts="Portal, Positioner, Popup, Arrow, Item, SubmenuRoot, SubmenuTrigger, Group, GroupLabel, RadioGroup, RadioItem, RadioItemIndicator, CheckboxItem, CheckboxItemIndicator, Separator"
/>
